<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>5.认识一下VueComponent</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="demo">
            
        </div>
    </body>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
        //定义一个学生组件
        const Student = Vue.extend({
            name :'Student',
            template:`
            <div>
                <h2>学生姓名:{{name}}</h2>
                <h2>学生年龄:{{age}}</h2>
                <button @click = "showMore">点我展示更多信息</button>
            </div>
            `,
            data(){
                return {
                    name:'张三',
                    age:18,
                    gender:'男',
                    subject:'前端'
                }
            },
            methods: {
                showMore(){
                    alert(`性别:${this.gender},所学技术:${this.subject}`)
                }
            },
        })
        //定义一个APP组件
        const App = Vue.extend({
            name:'App',
            components:{Student},
            template:`
            <div>
                <h2>**********************************</h2>
                <Student/>
                <h2>**********************************</h2>
            </div> `,
                data(){
                    return{
                       b:2 
                    }
                },
                methods: {
                    tests2(){
                        console.log('>>>>>>>>>>>>>>')
                    }
                },
        })
        //创建VM
        const vm = new Vue({
            el:'#demo',
            components:{App},
            template:'<App/>',
            data(){
                return{a:1}
            },
            methods: {
                test(){
                    conosle.log('@')
                }
            },
        })
    </script>
</html>